<template>
  <view class="product-info-block">
    <view class="product-info-header">
      <view class="title">
        {{ `${viwer}人正在浏览` }}
      </view>
      <view v-if="product.group_purchase_style === 1" class="sub-title">
        库存紧张，立即下单
      </view>
    </view>
    <view class="divider" />
    <view v-if="product.group_purchase_style === 1" class="group-wrapper">
      <view class="group-content">
        <view
          v-for="(item, index) in groupList"
          :key="index"
          class="group-purchase-item"
        >
          <v-image
            height="68rpx"
            width="68rpx"
            border-radius="50%"
            :src="item.img"
            mode="aspectFill"
          />
          <view class="item-content">
            <view class="main">
              {{ item.main }}
            </view>
            <view class="sub">
              {{ item.sub }}
            </view>
          </view>
          <v-button
            :custom-style="{ height: '60rpx', width: '150rpx' }"
            type="primary"
            @click="$emit('click-purchase')"
          >
            马上抢
          </v-button>
        </view>
      </view>
    </view>
    <template v-else-if="product.group_purchase_style === 2">
      <view class="avatar-container">
        <view class="avatar-item">
          <view class="avatar-holder">
            ···
          </view>
          <view class="avatar-text" />
        </view>
        <view class="avatar-select">
          <view class="circle" />
          <view class="avatar-text" />
        </view>
        <view class="avatar-wrapper">
          <view class="avatar-content">
            <view
              v-for="(item, index) in avatarList"
              :key="index"
              class="avatar-item"
            >
              <v-image
                height="68rpx"
                width="68rpx"
                border-radius="50%"
                :src="item.img"
              />
              <view class="avatar-text">
                {{ item.main }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="selectingAvatar" class="avatar-selecting">
        <v-image
          height="68rpx"
          width="68rpx"
          border-radius="50%"
          :src="selectingAvatar.img"
        />
        <view class="avatar-text">
          {{ `${selectingAvatar.main} 正在下单` }}
        </view>
      </view>
      <view class="order-button" @click="$emit('click-purchase')">
        库存紧张，立即下单
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { randomName } from '@/utils/generate';
defineProps<{
  product: SpuVO;
}>();

defineEmits<{
  'click-purchase': [];
}>();

const viwer = Math.floor(Math.random() * 1000) + 1000;

const list = ref<{ img: string; main: string; sub: string }[]>([]);
const groupList = computed(() => {
  const newList = list.value.concat([]);
  if (list.value.length) {
    newList.push(list.value[0]);
    newList.push(list.value[1]);
  }
  return newList;
});
const avatarList = computed(() => {
  const newList = list.value.concat([]);
  if (list.value.length) {
    newList.push(list.value[0]);
    newList.push(list.value[1]);
    newList.push(list.value[2]);
    newList.push(list.value[3]);
    newList.push(list.value[4]);
  }
  return newList;
});
const selectingAvatarIndex = ref(4);
const selectingAvatar = computed(() => {
  return avatarList.value[selectingAvatarIndex.value];
});
const getList = () => {
  const used: number[] = [];
  const newList: { img: string; main: string; sub: string }[] = [];
  for (let i = 0; i < 10; i++) {
    let imgIndex = Math.floor(Math.random() * 50) + 1;
    while (used.includes(imgIndex)) {
      imgIndex = Math.floor(Math.random() * 50) + 1;
    }
    used.push(imgIndex);
    const img = `/static/avatars/${imgIndex}.jpg`;
    const main = randomName();
    const hour = Math.floor(Math.random() * 6) + 1;
    const sub = `${hour}小时前购买了商品，下单成功`;
    newList.push({ img, main, sub });
  }
  list.value = newList;
};
onMounted(async () => {
  getList();
  setInterval(() => {
    if (avatarList.value.length) {
      selectingAvatarIndex.value =
        (selectingAvatarIndex.value + 1) % avatarList.value.length;
    } else {
      selectingAvatarIndex.value = 4;
    }
  }, 3000);
});
</script>

<style lang="scss" scoped>
.product-info-block {
  position: relative;
  margin: 0 24rpx 24rpx;
  padding: 18rpx 24rpx;
  border-radius: 16rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12rpx;

  .product-info-header {
    display: flex;
    align-items: center;
    height: 50rpx;
    gap: 16rpx;
    .title {
      font-size: 32rpx;
      font-weight: bold;
    }
    .sub-title {
      color: #666666;
    }
    .more-button {
      display: flex;
      align-items: center;
      gap: 6rpx;
      .label {
        font-size: 24rpx;
        color: #999999;
        flex-shrink: 0;
      }
    }
  }

  .divider {
    height: 1px;
    background-color: #eeeeee;
  }

  .group-wrapper {
    position: relative;
    height: 200rpx;
    overflow: hidden;
    .group-content {
      animation: group-roll 25s linear infinite;
    }
  }
  .group-purchase-item {
    display: flex;
    align-items: center;
    height: 100rpx;
    gap: 12rpx;
    .item-content {
      flex: 1;
      min-width: 0;
      .main {
        white-space: nowrap;
      }
      .sub {
        margin-top: 8rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
  .avatar-container {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(109rpx * 6);
    padding: 12rpx 0;
    margin: 0 auto;
    .avatar-wrapper {
      flex: 1;
      overflow: hidden;
      width: calc(109rpx * 5);
      .avatar-content {
        display: flex;
        animation: avtar-roll 30s linear infinite;
        width: fit-content;
      }
    }
    .avatar-select {
      position: absolute;
      right: 0;
      top: 12rpx;
      width: 109rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      .circle {
        box-sizing: border-box;
        margin-top: -10rpx;
        margin-bottom: -10rpx;
        height: 88rpx;
        width: 88rpx;
        border: 1px dotted rgba(255, 47, 59, 0.6);
        border-radius: 50%;
      }
    }
    .avatar-item {
      position: relative;
      width: 109rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      .avatar-holder {
        height: 68rpx;
        width: 68rpx;
        text-align: center;
        background: rgba(254, 0, 0, 0.1);
        border-radius: 50%;
        color: #ff2f3b;
        font-size: 36rpx;
        font-weight: bold;
        line-height: 68rpx;
      }
    }
    .avatar-text {
      font-size: 24rpx;
      line-height: 32rpx;
      height: 32rpx;
      color: #333333;
    }
  }
  .avatar-selecting {
    padding: 24rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rpx;
  }
  .order-button {
    height: 84rpx;
    border-radius: 42rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ff2f3b;
    color: #ff2f3b;
    font-size: 32rpx;
  }
}

@keyframes group-roll {
  0% {
    transform: translate(0, 0);
    z-index: 0;
  }
  19% {
    transform: translate(0, 0);
    z-index: 1;
  }
  @for $i from 1 through 5 {
    #{20% * $i} {
      transform: translate(0, -200rpx * $i);
      z-index: 1;
    }
    #{19% + 20% * $i} {
      transform: translate(0, -200rpx * $i);
      z-index: 1;
    }
  }
}

@keyframes avtar-roll {
  @for $i from 0 through 10 {
    #{10% * $i} {
      transform: translate(-109rpx * $i, 0);
    }
    #{9% + 10% * $i} {
      transform: translate(-109rpx * $i, 0);
    }
  }
}
</style>
